<script lang="ts" setup>
import type { PlayRecord } from "@/api/audio/types/audio"
import * as audio from "@/api/audio/index"
import { reactive, ref } from "vue"
import { ElMessage } from "element-plus"
import { onMounted } from "vue"
const tableData = reactive<PlayRecord[]>([])
const total = ref(0)
const pageSize = ref(3)
const currentPage = ref(1)

const props = defineProps({
  id: {
    type: String,
    required: true
  }
})
const listPlayRecords = (): void => {
  audio
    .playRecords(props.id)
    .then((res) => {
      tableData.length = 0
      tableData.push(...res.data)
      console.log(res)
    })
    .catch((res) => {
      ElMessage.error(`查询播放记录失败！${res.msg || ""}`)
    })
}

onMounted(() => {
  listPlayRecords()
})
</script>

<template>
  <el-card shadow="never">
    <el-table :data="tableData">
      <el-table-column prop="username" label="播放人" />
      <el-table-column prop="occurtime" label="播放时间" />
    </el-table>
    <div class="flex flex-row-reverse">
      <el-pagination
        v-if="total > 0"
        layout="prev,pager,next,sizes"
        :total="total"
        v-model:page-size="pageSize"
        :page-sizes="[3, 10, 20, 30, 40, 50]"
        @size-change="listPlayRecords"
        v-model:current-page="currentPage"
        @current-change="listPlayRecords"
      />
    </div>
  </el-card>
</template>
